<template>
    <Modal class="modal-country" width="540" v-model="countryModal" :mask-closable="false" :closable="false">
        <div slot="header">
            途径国家信息
            <Icon class="f-fr" type="ios-close" @click="closeModal" />
        </div>
        <div class="modal-body">
            <Form ref="formInline" :model="formInline" inline :labelWidth="100" @submit.native.prevent>
                <FormItem prop="dataCode" label="选择国家代码" class="dataCode">
                    <Select
                        v-model="formInline.dataCode"
                        clearable
                        filterable
                        transfer
                        :label-in-value="true"
                        @on-change="countryChange"
                    >
                        <Option
                            v-for="item in mCountryList"
                            :value="item.dataCode"
                            :key="item.dataCode"
                            :label="item.dataName"
                        >{{item.dataCode +'-'+ item.dataName}}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div class="btn-box">
                <Button type="primary" @click="saveHandle" size="small">保存</Button>
                <Button @click="deleteHandle" size="small">删除</Button>
            </div>
            <Table
                border
                height="150"
                ref="selection"
                :columns="columns"
                :data="selectedList"
                @on-selection-change="rowSelectChange"
            >
            </Table>
        </div>
        <div slot="footer">
            <Button type="primary" @click="closeModal">关闭</Button>
        </div>
    </Modal>
</template>

<script>
import $ from 'jquery'

export default {
    name: 'CountryModal',

    data () {
        return {
            countryModal: false,
            formInline: {
                dataCode: ''
            },
            mCountryList: [],
            selectedList: [],
            selectedData: null,
            deleteList: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    type: 'index',
                    title: '序号',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '国家代码',
                    key: 'label',
                    align: 'center'
                }
            ]

        }
    },

    methods: {

        init (list, mCountryList) {
            this.countryModal = true
            this.formInline.dataCode = ''
            this.selectedList = []
            if (list.length > 0) {
                list.forEach(item => {
                    let tempObj = {
                        value: item.countryKey,
                        label: item.countryCode
                    }
                    this.selectedList.push(tempObj)
                })
            }
            this.mCountryList = mCountryList
            /* this.mCountryList.forEach(item => {
                    item.dataName = item.dataCode + '/' + item.dataName;
                }) */

            setTimeout(() => {
                let ele = $('.dataCode').find('.ivu-select-input')
                console.log(ele)
                $(ele).focus()
            }, 1000)
        },

        countryChange (val) {
            this.selectedData = val
        },

        rowSelectChange (selection, row) {
            this.deleteList = selection
        },

        saveHandle () {
            if (!this.formInline.dataCode) {
                this.$Message.warning('选择国家代码')
                return false
            }
            let list = this.selectedList
            if (list.length === 0) {
                this.selectedList.push(this.selectedData)
                this.saveData()
                return false
            }
            let isRepeat = false
            this.selectedList.forEach(item => {
                if (item.label === this.selectedData.label) {
                    isRepeat = true
                }
            })
            if (!isRepeat) {
                this.selectedList.push(this.selectedData)
                this.saveData()
            } else {
                this.$Message.warning('国家代码已存在')
            }
        },

        saveData () {
            let list = this.selectedList
            let resList = []
            list.forEach(item => {
                let tempObj = {
                    countryKey: item.value,
                    countryCode: item.label
                }
                resList.push(tempObj)
            })
            this.$emit('saveCountryData', resList)
        },

        deleteHandle () {
            let list = this.deleteList
            let selectedList = this.selectedList

            if (list.length === 0) {
                this.$Message.warning('请选择需要删除的国家代码')
                return false
            }

            for (let i = 0; i < list.length; i++) {
                for (let j = 0; j < selectedList.length; j++) {
                    if (list[i].label === selectedList[j].label) {
                        selectedList.splice(j, 1)
                    }
                }
            }
            this.saveData()
        },

        closeModal () {
            this.countryModal = false
            this.$emit('totalPackageQuantityGetFocus')
        }
    }
}
</script>

<style lang="less">
    .modal-country {
        .btn-box {
            button {
                margin-right: 15px;
            }
            margin-bottom: 15px;
        }
    }
</style>
